<template>
  <a-card :bordered="false">
    <!--仓库信息-->
    <div style="background: #f2f2f2;height: 30px;width: auto;margin-bottom: 10px;padding-left: 16px">
      <span style="font-size: 13px;float: left;color:#000000;font-weight: bold;margin-top: 5px">仓库基本信息</span>
    </div>
    <div style="margin-top: 8px;padding-left: 26px">
      <span style="color: red;margin-right: 2px">*</span>
      <span style="color: #5f5e5e;width: 100px">仓库选择：</span>
      <a-select @change="change_cangku(select_cangku)" v-model="select_cangku" style="color: #5f5e5e;width: 180px;font-weight: bold" placeholder="请选择仓库">
        <a-select-option :value="item.id" v-for="item in cangkuList">{{ item.warehouseName }}</a-select-option>
      </a-select>
    </div>
    <div style="margin-top: 10px;padding-left: 26px">
      <span style="color: red;margin-right: 2px">*</span>
      <span style="color: #5f5e5e;width: 100px">联 系 人：</span>
      <a-input placeholder="联系人" style="color: #5f5e5e;font-weight: bold;width: 180px;margin-left: 5px" v-model="cangku_userName"></a-input>
    </div>
    <div style="margin-top: 10px;padding-left: 26px">
      <span style="color: red;margin-right: 2px">*</span>
      <span style="color: #5f5e5e;width: 100px">联系电话：</span>
      <a-input placeholder="联系电话" style="color: #5f5e5e;font-weight: bold;width: 180px;" v-model="cangku_phone"></a-input>
    </div>
    <div style="margin-top: 10px;padding-left: 26px">
      <span style="color: red;margin-right: 2px">*</span>
      <span style="color: #5f5e5e;width: 100px">收货地址：</span>
      <a-input placeholder="收货地址" style="color: #5f5e5e;font-weight: bold;width: 360px;" v-model="cangku_address"></a-input>
    </div>

    <!--采购信息-->
    <div style="background: #f2f2f2;height: 30px;width: auto;margin-bottom: 10px;padding-left: 16px;margin-top: 30px">
      <span style="font-size: 13px;float: left;color:#000000;font-weight: bold;margin-top: 5px">采购信息录入</span>
    </div>
    <div style="margin-top: 10px;padding-left: 26px">
      <span style="color: #ffffff;margin-right: 2px">*</span>
      <span style="color: #5f5e5e;width: 100px">采购部门：</span>
      <a-input placeholder="采购部门" style="color: #5f5e5e;font-weight: bold;width: 180px;" v-model="caigou_depart"></a-input>
    </div>
    <div style="margin-top: 10px;padding-left: 26px">
      <span style="color: #ffffff;margin-right: 2px;margin-left: -13px">*</span>
      <span style="color: #5f5e5e;width: 100px">负责人姓名：</span>
      <a-input placeholder="负责人姓名" style="color: #5f5e5e;font-weight: bold;width: 180px;" v-model="caigou_username"></a-input>
    </div>
    <div style="margin-top: 10px;padding-left: 26px">
      <span style="color: #ffffff;margin-right: 2px">*</span>
      <span style="color: #5f5e5e;width: 100px">联系电话：</span>
      <a-input placeholder="联系电话" style="color: #5f5e5e;font-weight: bold;width: 180px;" v-model="caigou_phone"></a-input>
    </div>
    <div style="margin-top: 10px;padding-left: 26px">
      <span style="color: #ffffff;margin-right: 2px">*</span>
      <span style="color: #5f5e5e;width: 100px">采购备注：</span>
      <a-input placeholder="采购备注" style="color: #5f5e5e;font-weight: bold;width: 360px;" v-model="caigou_remark"></a-input>
    </div>
    <div style="margin-top: 10px;padding-left: 26px">
      <span style="color: #ffffff;margin-right: 2px">*</span>
      <span style="color: #5f5e5e;width: 100px">上传附件：</span>
      <a-form-item label="" :labelCol="labelCol" :wrapperCol="wrapperCol">
        <j-image-upload class="avatar-uploader" text="上传" v-model="caigou_fileList" style="margin-top: 8px;"></j-image-upload>
      </a-form-item>
    </div>

    <!--检验信息录入-->
    <div style="background: #f2f2f2;height: 30px;width: auto;margin-bottom: 10px;padding-left: 16px;margin-top: 30px">
      <span style="font-size: 13px;float: left;color:#000000;font-weight: bold;margin-top: 5px">检验信息录入</span>
    </div>
    <div style="margin-top: 10px;padding-left: 26px">
      <span style="color: #ffffff;margin-right: 2px;margin-left: -13px">*</span>
      <span style="color: #5f5e5e;width: 100px">负责人姓名：</span>
      <a-input placeholder="负责人姓名" style="color: #5f5e5e;font-weight: bold;width: 180px;" v-model="check_username"></a-input>
    </div>
    <div style="margin-top: 10px;padding-left: 26px">
      <span style="color: #ffffff;margin-right: 2px">*</span>
      <span style="color: #5f5e5e;width: 100px">联系电话：</span>
      <a-input placeholder="联系电话" style="color: #5f5e5e;font-weight: bold;width: 180px;" v-model="check_phone"></a-input>
    </div>
    <div style="margin-top: 10px;padding-left: 26px">
      <span style="color: #ffffff;margin-right: 2px">*</span>
      <span style="color: #5f5e5e;width: 100px">检验备注：</span>
      <a-input placeholder="检验备注" style="color: #5f5e5e;font-weight: bold;width: 360px;" v-model="check_remark"></a-input>
    </div>
    <div style="margin-top: 10px;padding-left: 26px">
      <span style="color: #ffffff;margin-right: 2px">*</span>
      <span style="color: #5f5e5e;width: 100px">上传附件：</span>
      <a-form-item label="" :labelCol="labelCol" :wrapperCol="wrapperCol">
        <j-image-upload class="avatar-uploader" text="上传" v-model="check_fileList" style="margin-top: 8px;"></j-image-upload>
      </a-form-item>
    </div>


    <!--下面区域-->
    <div style="background: #f2f2f2;height: 30px;width: auto;margin-top: 28px;margin-bottom: 10px;padding-left: 16px">
      <span style="font-size: 13px;float: left;color:#000000;font-weight: bold;margin-top: 5px">入库商品信息</span>
    </div>
    <div style="background: #f2f2f2;height: 100px;width: auto;margin-top: 8px;margin-bottom: 20px;padding-left: 16px;padding-top: 10px">
      <span style="font-size: 12px;color:#aca6a6;font-weight: bold;">注意事项:</span><br/>
      <span style="font-size: 12px;color:#aca6a6;font-weight: bold;">1.入库商品时，需要先选择对应的商品，此产品必须要在本系统中存在。</span><br/>
      <span style="font-size: 12px;color:#aca6a6;font-weight: bold;">2.选择商品后，可以选择配置该产品</span><br/>
      <span style="font-size: 12px;color:#aca6a6;font-weight: bold;">3.输入商品的商品编号「例：面料编号，产品货号或供应商面料编号、供应商货号」</span><br/>
    </div>

    <div>
      <div style="border: none;background-color: #ffffff;padding-bottom: 28px;">
        <a-button type="primary" @click="increase_data(0)" style="color: #F9D532;width: 120px;height: 32px;background: #333333;border-style: none;font-size: 12px">选择商品添加</a-button>
      </div>
      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        class="j-table-force-nowrap"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        @change="handleTableChange" v-show="this.tabs==1" style="margin-top: -20px;">

        <template slot="avatarslot" slot-scope="text, record, index">
          <div class="anty-img-wrap">
            <a-avatar shape="square" :src="getAvatarView(record.img)" icon="img"/>
          </div>
        </template>

        <template slot="htmlSlot" slot-scope="text">
          <div v-html="text"></div>
        </template>
        <template slot="imgSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
          <img v-else :src="getImgView(text)" height="25px" alt="" style="max-width:80px;font-size: 12px;font-style: italic;"/>
        </template>
        <template slot="fileSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
          <a-button
            v-else
            :ghost="true"
            type="primary"
            icon="download"
            size="small"
            @click="uploadFile(text)">
            下载
          </a-button>
        </template>

        <span slot="action" slot-scope="text, record">
          <div align="center" style="align-content: center;margin-left: 0px;">
          <a @click="set_items(record.id)" style="float: left;margin-left: 10px;font-size: 14px;color: #d29328;">配置</a>
             <a-menu-item style="float: left;margin-left: 10px;">
             <a-popconfirm title="确定删除该商品吗?" @confirm="() => edit_data_status(record.id,2)">
                  <a style="font-size: 14px;color: #d29328;">删除</a>
                </a-popconfirm>
          </a-menu-item>

            <a @click="set_reservoir(record.id)" style="float: left;margin-left: 10px;font-size: 14px;color: #d29328;">入库明细</a>
          </div>

        </span>
      </a-table>
    </div>


    <div style="border: none;background-color: #ffffff;padding-bottom: 8px;float: right;margin-right: 16px;margin-top: 16px">
      <a-button type="primary" @click="submit_instorageDan" style="color: #F9D532;width: 100px;height: 32px;background: #333333;border-style: none;font-size: 12px">提交</a-button>
      <a-button @click="back_top" style="color: #333333;width: 100px;height: 32px;background: #dcdada;border-style: none;font-size: 12px;margin-left: 10px">取消</a-button>
    </div>

        <AddrukuDanGoodsModule ref="modalForm" @ok="modalFormOk"></AddrukuDanGoodsModule>
  </a-card>
</template>

<script>

  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import {putAction,getAction,postAction,getFileAccessHttpUrl,httpAction} from '@/api/manage';
  import JDate from '@/components/jeecg/JDate.vue'
  import '@/assets/less/TableExpand.less'
  import JImageUpload from '../../components/jeecg/JImageUpload'
  import AddrukuDanGoodsModule from './modules/AddrukuDanGoodsModule'

  export default {
    name: "categoryinfo",
    mixins:[JeecgListMixin],
    components: {
      JDate,
      JImageUpload,
      AddrukuDanGoodsModule
    },
    data () {
      return {
        description: 'categoryinfo管理页面',
        tabs: 1,//切换框
        select_cangku:'请选择仓库',
        cangkuList:[],//仓库集合
        cangku_userName:'',
        cangku_phone:'',
        cangku_address:'',
        caigou_depart:'',
        caigou_username:'',
        caigou_phone:'',
        caigou_remark:'',
        caigou_fileList:[],
        check_username:'',
        check_phone:'',
        check_remark:'',
        check_fileList:[],
        // 表头
        columns: [
          {
            title: '序号',
            dataIndex: '',
            key:'rowIndex',
            width:60,
            align:"center",
            customRender:function (t,r,index) {
              return parseInt(index)+1;
            }
          },
          {
            title:'商品编号',
            align:"center",
            dataIndex: 'goodsCode'
          },
          {
            title:'供应商商品编号',
            align:"center",
            dataIndex: 'supplaygoodCode'
          },
          {
            title:'商品类型',
            align:"center",
            dataIndex: 'goodtypeName'
          },
          {
            title:'单位',
            align:"center",
            dataIndex: 'unit'
          },
          {
            title:'入库数量',
            align:"center",
            dataIndex: 'intoSumnumber'
          },
          {
            title:'入库单价',
            align:"center",
            dataIndex: 'intoUnit'
          },
          {
            title:'结算方式',
            align:"center",
            dataIndex: 'settlementMethod',
            customRender:function (text) {
              if(text=='0'){
                return "备库"
              }else if(text=='1'){
                return "代售"
              }else if(text=='2'){
                return "寄售"
              }
            }
          },
          {
            title:'入库总金额',
            align:"center",
            dataIndex: 'intoMoney'
          },
          {
            title:'状态',
            align:"center",
            dataIndex: 'status',
            customRender:function (text) {
              if(text=='0'){
                return "未配置"
              }else {
                return "已配置"
              }
            }
          },
          {
            title: '操作',
            dataIndex: 'action',
            align:"center",
            width: 120,
            scopedSlots: { customRender: 'action' },
          }
        ],
        url: {
          fileUpload: window._CONFIG['domianURL'] + "/sys/common/upload",
          list: "/inventory/manger/instorageDan_goodsPagelist?topId="+this.$route.query.rukudan_id,
          edit_data_staus: "/inventory/manger/change_instoragegoods_status",
          query_allcankgu: "/location/configuration/query_allwarehouse",
          query_cankguDetail: "/location/configuration/query_warehouseById",
          submit_rukudan: "/inventory/manger/update_instorageDan",
          query_instorageDan: "/inventory/manger/query_InstorageDanById",//入库单详情
        }
      }
    },
    computed: {
      uploadAction: function() {
        return this.url.fileUpload;
      }
    },
    created () {
      this.showcangku_list();
      this.showrukudan_detail();
    },
    methods: {
      getAvatarView: function (avatar) {
        return getFileAccessHttpUrl(avatar)
      },
      showrukudan_detail() {//查询入库单详情
        let params = {id:this.$route.query.rukudan_id};
        getAction(this.url.query_instorageDan,params).then((res)=>{
          if(res.success) {
            this.select_cangku = res.result.warehouseId;
            this.cangku_name=res.result.warehouseName;
            this.cangku_userName=res.result.contact;
            this.cangku_phone=res.result.contactPhone;
            this.cangku_address=res.result.address;
            this.caigou_depart=res.result.caigouDepart;
            this.caigou_username=res.result.caigouUsername;
            this.caigou_phone=res.result.caigouPhone;
            this.caigou_remark=res.result.caigouRemark;
            this.check_username=res.result.checkUsername;
            this.check_phone=res.result.checkPhone;
            this.check_remark=res.result.checkRemark;
            // this.caigou_fileList = res.result.caigouImg;
            // this.check_fileList = res.result.checkImg;
            setTimeout(() => {
              this.caigou_fileList = res.result.caigouImg;
            }, 5)
            setTimeout(() => {
              this.check_fileList = res.result.checkImg;
            }, 5)
          }
        });
      },
      showcangku_list() {//查询仓库
        getAction(this.url.query_allcankgu).then((res)=>{
          if(res.success) {
            this.cangkuList = res.result;
          }
         });
      },
      change_cangku(val){//选择仓库事件
        let params = {id:val};
        getAction(this.url.query_cankguDetail,params).then((res)=>{
          if(res.success) {
            this.cangku_userName=res.result.contact;
            this.cangku_phone=res.result.contactPhone;
            this.cangku_address=res.result.address;
          }
        });
      },
      increase_data(record) {
        this.$refs.modalForm.edit(record);
        this.$refs.modalForm.title = "选择商品添加";
        this.$refs.modalForm.disableSubmit = true;
      },
      submit_instorageDan(){//提交入库单
        let params = {id:this.$route.query.rukudan_id,
          warehouseId:this.select_cangku,
          caigouDepart:this.caigou_depart,
          caigouUsername:this.caigou_username,
          caigouPhone:this.caigou_phone,
          caigouRemark:this.caigou_remark,
          caigouImg:this.caigou_fileList,
          checkUsername:this.check_username,
          checkPhone:this.check_phone,
          checkRemark:this.check_remark,
          checkImg:this.check_fileList
        };
        httpAction(this.url.submit_rukudan,params,"put").then((res)=>{
          if(res.success){
            this.$message.success(res.message);
            this.$router.push({path:'/instorage/manger'})
          }else {
            this.$message.error(res.message);
          }
        });
      },
      back_top(){//取消
        this.$router.push({path:'/instorage/manger'})
      },
      set_items(cangku_id){//跳转配置入库项
        this.$router.push({path:'/peizhi/rukupici',query: {ruku_goodid:cangku_id}})
      },
      set_reservoir(cangku_id){//跳转入库明细
        this.$router.push({path:'/instorage/itemswater',query: {ruku_goodid:cangku_id}})
      },
      edit_data_status(id,status){//修改状态
        let params = {id:id,status:status};
        httpAction(this.url.edit_data_staus,params,"put").then((res)=>{
          if(res.success){
            this.$message.success(res.message);
            this.loadData();
          }else {
            this.$message.error(res.message);
          }
        });
      },
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less';
</style>